<template>
  <header class="header bg-blue-900 text-white py-1 shadow-md flex justify-end">
    <nav class="w-[500px]">
      <ul class="flex list-none">
        <li
          v-for="item in list"
          :key="item.path"
          class="px-5 mx-2 h-[50px] flex justify-center items-center hover:bg-stone-900/40"
          :class="{ 'bg-stone-900/40': item.isMain }"
        >
          <NuxtLink
            class="transition-colors"
            :to="item.path"
            :target="item.target"
            :rel="item.rel"
            >{{ item.text }}</NuxtLink
          >
        </li>
      </ul>
    </nav>
    <div class="flex items-center">
      <UserInfo />
    </div>
  </header>
</template>

<script setup lang="ts">
const router = useRouter()
const userStore = useUserStore()
const props = defineProps({
  listData: {
    type: Array,
    default: () => []
  }
})

const list = computed(() => {
  return props.listData.map((item: any) => {
    return {
      text: item.text,
      path: item.path,
      target: item.target,
      rel: item.rel,
      isMain: router.currentRoute.value.path === item.path
    }
  })
})
// 导航组件逻辑
</script>

<style scoped>
/* 导航组件样式 */
</style>
